<template>
	<div class="card-select-wrapper">
		<label class="label-contianer">{{ label }}</label>
		<el-select popper-class="card-select-dropdown" :value="getSelectedTextList()" :disabled="disabled" :placeholder="placeholder" class="card-type" @clear="clear" :clearable="clearable">
			<div class="options-container">
				<p class="collect-variable-customer-text">客户信息</p>
				<div class="collect-variable-role-box">
					<span class="role-text">角色：</span>
					<el-tag v-for="item in roleList" :key="item.id" class="role-tag" :class="{ activeTag: activeRoleId === item.id }" @click="checkRole(item.id)">{{ item.name }}</el-tag>
				</div>
				<el-radio-group v-model="checked">
					<el-option v-for="item in getVariablesByRole()" :key="item.id" @click.native="e => changeVal(e, item)">
						<el-radio :label="item.id">{{ item.name }}</el-radio>
					</el-option>
				</el-radio-group>
			</div>
		</el-select>
	</div>
</template>

<script>
export default {
	props: {
		variableList: {
			type: Array,
			default: () => []
		},
		roleList: {
			type: Array,
			default: () => []
		},
		activeRoleId: {
			type: Number,
			default: () => 0
		},
		disabled: {
			type: Boolean,
			default: () => false
		},
		clearable: {
			type: Boolean,
			default: () => true
		},
		value: {
			type: String,
			default: () => ''
		},
		label: {
			type: String,
			default: () => ''
		},
		id: {
			type: String,
			default: () => ''
		},
		placeholder: {
			type: String,
			default: () => '- - 不绑定 - -'
		}
	},
	data() {
		return {
			checked: ''
		};
	},

	watch: {
		id(val) {
			this.checked = val;
		}
	},

	mounted() {
		this.checked = this.id;
	},

	methods: {
		clear() {
			this.$emit('clearValue', this.checked);
			this.checked = '';
		},
		getVariablesByRole() {
			return this.variableList.filter(item => item.roleId === this.activeRoleId) || [];
		},
		getSelectedTextList() {
			let value = this.variableList.find(item => item.id === this.checked);
			if (value) {
				return `客户信息-${value.roleName}-${value.name}`;
			}
			return '';
		},
		checkRole(id) {
			this.$emit('checkRole', id);
		},
		onCheck(id, data) {
			this.checked = id;
			console.log('onCheck:', id, data);
		},
		changeVal(e, data) {
			e.preventDefault();
			e.stopPropagation();
			this.checked = data.id;
			this.$emit('onCheck', data);
			console.log('changeVal', data);
		}
	}
};
</script>

<style lang="less" scoped>
.card-select-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	.label-contianer {
		width: 70px;
		text-align: center;
	}
	.varSelect {
		margin-top: 10px;
		max-height: 90px;
		overflow-y: auto;
	}
	.varscrollSelect .el-select__tags {
		max-height: 90px;
		overflow-y: auto;
	}
	.line {
		height: 2px;
		background: #eee;
		// width: 96%;
		display: block;
		margin-left: 10px;
	}

	.collect-variable-role-box {
		margin: 18px 0 0 16px;
		.role-text {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.activeTag {
			height: 32px;
			border-radius: 4px;
			background-color: #e7f2fe;
			color: #5374f2;
			margin: 0 7px;
			cursor: pointer;
		}
	}
}
</style>

<style lang="less">
.card-select-dropdown {
	min-width: 360px !important;
	.collect-variable-customer-text,
	.role-text {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
	}
	.collect-variable-role-box {
		padding: 10px 0;
	}
	.options-container {
		padding: 10px 20px;
	}
	.el-radio-group {
		width: 100%;
	}
	.role-tag {
		height: 32px;
		background: #ffffff;
		border-radius: 4px;
		color: #6784f2;
		margin: 0 7px;
		cursor: pointer;
	}
	.activeTag {
		height: 32px;
		border-radius: 4px;
		background-color: #e7f2fe;
		color: #5374f2;
		margin: 0 7px;
		cursor: pointer;
	}
}
</style>
